import React, {
	PureComponent
} from 'react'
import { Alert } from 'antd'
import { connect } from 'dva'

import Login from '@/components/Login'
import styles from './index.less'
const {
	UserName,
	Password,
	Submit
} = Login

@connect(({ login: { error }, loading}) => ({
	error,
	loading: loading.effects['login/login']
}))
class LoginPage extends PureComponent {
	handleSubmit = (err, values) => {
		if (!err) {
			const { dispatch } = this.props

			dispatch({
				type: 'login/login',
				payload: {
					...values
				}
			})
		}
	};
	renderMessage = message => (
    	<Alert style={{ marginBottom: 20 }} message={message} type="error" showIcon />
  	);
	render() {
		const {
			error,
			loading
		} = this.props
		return (
			<div className={styles.main}>
				<Login 
					onSubmit={this.handleSubmit}
					ref={form => {
			            this.loginForm = form;
			          }}>
			        {
			        	error && error.message && !loading && this.renderMessage(error.message)
			        }
					<UserName 
						name="name"
						onPressEnter={e => {
			                e.preventDefault();
			                this.loginForm.validateFields(this.handleSubmit);
			              }} />
					<Password 
						name="password"
						onPressEnter={e => {
			                e.preventDefault();
			                this.loginForm.validateFields(this.handleSubmit);
			              }} />
					<Submit loading={loading}>登录</Submit>
				</Login>
			</div>
		)
	}
}

export default LoginPage